<template>
  <el-dialog
    :visible.sync="isShow"
    :title="title"
    top="2%"
    @closed="dialogClosed"
  >
  <div style="height:70vh;overflow:auto;padding: 15px;">
    <el-table border stripe :data="indexData">
      <el-table-column prop="id" label="ID" width="90px"></el-table-column>
      <el-table-column prop="datadate" label="日期" width="120px"></el-table-column>
      <el-table-column label="数值">
        <template slot-scope="scope">
          <div class="tablerow">
            <span v-show="scope.row.iseditor">
                <el-input size="mini" type="text" v-model="scope.row.datavalue" style="width:90px;margin-right:5px;"></el-input>
                <el-button size="mini" type="text" @click="toUpdateValue(scope.row)">保存</el-button>
                <el-button size="mini" type="text" @click="scope.row.iseditor = false">取消</el-button>
            </span>
            <span v-show="!scope.row.iseditor">
              {{scope.row.datavalue}}
              <span v-if="editor" class="rowactions">
                <i class="el-icon-edit-outline" @click="scope.row.iseditor = true"></i>
                <i class="el-icon-delete-solid" @click="toDeleteRowValue(scope.row, scope.$index)"></i>
              </span>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
<div slot="footer">
    <el-pagination style="margin-top:5px;"
      background
      :current-page="page"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalCount"
      @current-change="handlePopPageChange">
    </el-pagination>
  </div>
</el-dialog>
</template>
<script>
  import {
    getEDBTableDetail,
    deleteIndexValue,
    updateIndexValue,
  } from '@/api/edbdata/datalib'
  export default {
    name: 'IndexDetaiPopup',
    props: {
      editor: {
        type: Boolean,
        require: true,
        default: true,
      },
      show: {
        type: Boolean,
        require: true,
        default: false,
      },
      indexId: {
        type: Number,
        require: true,
        default: -1,
      },
      title: {
        type: String,
        require: true,
        default: '',
      },
    },
    data() {
      return {
        isShow: false,
        page: 1,
        pageSize: 50,
        totalCount: 0,
        indexInfo: {},
        indexData: [],
      }
    },
    watch: {
      indexId(n, o) {
        if (n < 0) {
          return
        }
        this.indexInfo = {}
        this.indexData = []
        this.getIndexDetailData()
        this.isShow = this.show
      },
    },
    methods: {
      dialogClosed() {
        this.$emit('closed', null)
      },
      getIndexDetailData(page = 1) {
        if (this.indexId < 1) {
          return
        }
        const params = {
          iid: this.indexId,
          page: page,
          page_size: this.pageSize,
        }
        getEDBTableDetail(params).then((res) => {
          const data = res.data
          this.indexInfo = data.index_info
          this.indexData = data.data.map((item) => {
            item.iseditor = false
            return item
          })
          this.page = data.page
          this.totalCount = data.total_count
        })
      },

      // 页码改变
      handlePopPageChange(page) {
        this.page = page
        this.getIndexDetailData(page)
      },

      // 更新数据
      toUpdateValue(row){
        const valueData = {
          dataid: this.indexId,
          value_id: row.id,
          datadate: row.datadate,
          datavalue: row.datavalue
        }
        updateIndexValue(valueData).then(res => {
          if (res.code === 200){
            this.$baseMessage(res.msg, 'success')
          }else{
            this.$baseMessage(res.msg, 'error')
          }
          row.iseditor = false
        })
      },

      // 删除数据
      toDeleteRowValue(row) {
        const valueData = {
          dataid: this.indexId,
          value_id: row.id,
          datadate: row.datadate,
          datavalue: row.datavalue
        }
        this.$baseConfirm('确定要删除该数据吗?', null,async()=>{
          deleteIndexValue(valueData).then(res => {
            if (res.code === 200){
              this.$baseMessage(res.msg, 'success')
              // 刷新当前数据
              this.getIndexDetailData()
            }else{
              this.$baseMessage(res.msg, 'error')
            }
          })
        })

    }
  }
}
</script>
<style scoped lang="scss">
.showactions{opacity: 1;}
.tablerow{
  display:block;
  width: 100%;
  .rowactions{
    float:right;
    opacity: 0;
    .el-icon-edit-outline,.el-icon-delete-solid{
      cursor: pointer;
      margin-left: 6px;
    }
    .el-icon-edit-outline{
      color: #0073FC;
    }
    .el-icon-delete-solid{
      color: #F34D37;
    }
  }
  &:hover{
    .rowactions{
      @extend .showactions;
    }
  }
}
</style>